<template>
  <div class="personal-info-container">
    <div class="form-card">
      <h2>修改个人信息</h2>
      <form @submit.prevent="updateInfo">
        <div class="form-group">
          <label for="currentUsername">当前用户名:</label>
          <input type="text" id="currentUsername" v-model="currentUsername" readonly />
        </div>
        <div class="form-group">
          <label for="newUsername">新用户名:</label>
          <input type="text" id="newUsername" v-model="newUsername" />
        </div>
        <div class="form-group">
          <label for="currentPassword">当前密码:</label>
          <input type="password" id="currentPassword" v-model="currentPassword" />
        </div>
        <div class="form-group">
          <label for="newPassword">新密码:</label>
          <input type="password" id="newPassword" v-model="newPassword" />
        </div>
        <div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
        <button type="submit" class="submit-button">保存修改</button>
      </form>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import axios from 'axios';

// 初始化数据
const currentUsername = ref('');
const newUsername = ref('');
const currentPassword = ref('');
const newPassword = ref('');
const errorMessage = ref('');

// 页面加载时获取用户信息
onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:8080/api/users/info');
    if (response.status === 200) {
      currentUsername.value = response.data.username;
    }
  } catch (error) {
    console.error('获取用户信息出错:', error);
  }
});

// 验证当前密码是否正确
const verifyCurrentPassword = async () => {
  try {
    const response = await axios.post('http://localhost:8080/api/users/verify-password', {
      username: currentUsername.value,
      password: currentPassword.value
    });
    return response.data.isValid;
  } catch (error) {
    console.error('验证密码出错:', error);
    return false;
  }
};

// 更新信息的函数
const updateInfo = async () => {
  errorMessage.value = '';

  // 验证当前密码是否正确
  const isPasswordValid = await verifyCurrentPassword();
  if (!isPasswordValid) {
    errorMessage.value = '当前密码不正确，请重新输入';
    return;
  }

  // 验证新用户名
  if (newUsername.value && newUsername.value.length < 3) {
    errorMessage.value = '新用户名长度至少为 3 个字符';
    return;
  }

  // 验证新密码的复杂度
  if (newPassword.value && newPassword.value.length < 8) {
    errorMessage.value = '新密码长度至少为 8 个字符';
    return;
  }

  try {
    await axios.post('http://localhost:8080/api/users/update', {
      currentUsername: currentUsername.value,
      newUsername: newUsername.value,
      currentPassword: currentPassword.value,
      newPassword: newPassword.value
    });
    currentPassword.value = '';
    newPassword.value = '';
    alert('信息更新成功');
  } catch (error) {
    errorMessage.value = error.response.data.message || '更新失败，请重试';
    console.error('更新信息出错:', error);
  }
};
</script>

<style scoped>
.personal-info-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.form-card {
  width: 100%;
  max-width: 400px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 30px;
  transition: transform 0.3s ease;
}

.form-card:hover {
  transform: translateY(-5px);
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-weight: 700;
  font-size: 24px;
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.form-group input:focus {
  border-color: #007BFF;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  outline: none;
}

.submit-button {
  width: 100%;
  padding: 10px;
  background: linear-gradient(90deg, #007BFF 0%, #0056b3 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.submit-button:hover {
  background: linear-gradient(90deg, #0069d9 0%, #0056b3 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

.error-message {
  color: #e74c3c;
  margin-bottom: 15px;
  font-size: 14px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .form-card {
    padding: 20px;
  }

  h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }
}
</style>